{% extends 'base.html' %}

{% block title %}词性识别{% endblock %}

{% block content %}
    <h1>词性识别</h1>
    <p>请输入一段中文文本：</p>
    <form method="post">
        {% csrf_token %}
        <textarea name="text" rows="5" cols="60">{{ user_input }}</textarea><br>
        <div class="button-container">
            <input type="submit" value="词性识别" class="styled-button">
        </div>
    </form>
    {% if show_result %}
        <div>
            <h2>词性识别结果</h2>
            <div>{{ highlighted_text|safe }}</div>
        </div>
    {% endif %}
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }

        h1 {
            text-align: left; /* 标题居中对齐 */
            color: black;
            margin-top: 40px;
        }

        textarea {
            width: 98%;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
            resize: none; /* 禁用手动调整大小 */
        }
        .button-container {
            display: flex; /* 使用flex布局 */
            justify-content: flex-end; /* 将内容对齐到右侧 */
        }


        .styled-button {
            background-color: #007bff; /* 按钮背景色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角边框 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
        }

        .styled-button:hover {
            background-color: #0056b3; /* 悬停时的背景色 */
            transform: scale(1.05); /* 悬停时轻微放大 */
        }

        .styled-button:active {
            transform: scale(0.95); /* 按下时轻微缩小 */
        }

        .word {
            background-color: #e0e0e0; /* 背景 */
            border-radius: 4px;        /* 圆角 */
            padding: 5px;              /* 内边距 */
            margin: 2px;               /* 外边距 */
            display: inline-block;      /* 垂直排列 */
            transition: transform 0.2s; /* 平滑过渡效果 */
            font-weight: bold;          /* 加粗字体 */
        }

        .word:hover {
            transform: scale(1.1);      /* 悬停时放大 */
            background-color: #b2ebf2;  /* 悬停时改变背景色 */
        }

    </style>
{% endblock %}






